<template>
  <div class="table-tool-con" v-if="showTools">
    <el-tooltip v-if="showSize" class="tool-item" effect="dark" content="密度" placement="top">
      <el-dropdown trigger="click" size="small" @command="onCommandChange">
       <span class="tool-icon" :style="{'color': this.toolColor}">
         <svg viewBox="0 0 1024 1024" focusable="false" data-icon="vertical-align-middle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
           <path d="M588.373333 435.626667a42.752 42.752 0 0 0 69.930667-13.866667 42.666667 42.666667 0 0 0-9.344-46.72l-106.666667-106.666667a42.666667 42.666667 0 0 0-14.08-8.96 42.666667 42.666667 0 0 0-32.426666 0 42.666667 42.666667 0 0 0-14.08 8.96l-106.666667 106.666667a42.837333 42.837333 0 0 0 60.586667 60.586667l33.706666-34.133334v221.013334l-33.706666-34.133334a42.837333 42.837333 0 1 0-60.586667 60.586667l106.666667 106.666667a42.666667 42.666667 0 0 0 14.08 8.96 40.106667 40.106667 0 0 0 32.426666 0 42.666667 42.666667 0 0 0 14.08-8.96l106.666667-106.666667a42.837333 42.837333 0 1 0-60.586667-60.586667l-33.706666 34.133334V401.493333l33.706666 34.133334zM298.666667 170.666667h426.666666a42.666667 42.666667 0 1 0 0-85.333334H298.666667a42.666667 42.666667 0 0 0 0 85.333334z m426.666666 682.666666H298.666667a42.666667 42.666667 0 0 0 0 85.333334h426.666666a42.666667 42.666667 0 0 0 0-85.333334z"></path>
         </svg>
       </span>
        <el-dropdown-menu slot="dropdown" class="antvue-custom-drop-select">
          <el-dropdown-item command="medium" :class="{'selected-drop': 'medium' == size}">默认</el-dropdown-item>
          <el-dropdown-item command="small" :class="{'selected-drop': 'small' == size}">中等</el-dropdown-item>
          <el-dropdown-item command="mini" :class="{'selected-drop': 'mini' == size}">紧凑</el-dropdown-item>
<!--          <el-dropdown-item command="mini">迷你</el-dropdown-item>-->
        </el-dropdown-menu>
      </el-dropdown>
    </el-tooltip>

    <el-tooltip v-if="showRefresh" class="tool-item" effect="dark" content="刷新" placement="top">
     <span class="tool-icon" :style="{'color': this.toolColor}" @click="onRefresh">
       <svg viewBox="0 0 1024 1024" focusable="false" data-icon="vertical-align-middle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
         <path d="M935.161672 427.51891c-14.511505-11.744485-37.643342-9.155521-49.1627 5.403057l-12.9438 16.20917c-0.926092-5.842055-1.995447-11.625782-3.158946-17.325597C831.326792 245.594511 666.360623 110.434182 477.668077 110.434182c-27.455305 0-55.099922 2.885723-82.198094 8.562003C179.036629 164.405397 39.60195 378.546545 84.655052 596.34499c38.522362 186.222285 203.488531 321.383638 392.229173 321.383638 27.430746 0 55.076386-2.873444 82.174558-8.549723 75.144444-15.746636 144.18589-53.508681 198.288089-108.002806l1.87572-1.662873c1.757017-1.74576 2.778276-3.432169 2.588965-3.443425l1.781576-2.387373c2.137687-3.527336 4.65502-9.191336 4.65502-16.173354 0-17.361413-14.035668-31.479969-31.326473-31.479969-4.275373 0-8.454556 0.914836-12.325723 2.612501l-1.90028-1.318018-8.644891 8.65717c-46.359864 46.478568-104.261599 78.042447-167.484525 91.283006-22.657023 4.750187-45.766346 7.160073-68.684312 7.160073-157.818375 0-295.733445-113.073288-327.96145-268.87268-37.738509-182.291766 78.849836-361.484961 259.918751-399.448598 22.657023-4.750187 45.766346-7.160073 68.708871-7.160073 157.793816 0 295.709909 113.061009 327.96145 268.860401 0.427742 2.101871 0.855484 4.227278 1.258667 6.364965l-13.751189-11.091616c-14.511505-11.768021-37.59627-9.1678-49.1627 5.390777-12.017708 15.056927-9.619078 37.156248 5.343705 49.269124l78.089519 63.1032c0.14224 0.106424 0.285502 0.213871 0.427742 0.332575l3.491521 2.814092 0.712221 0c6.483668 3.657296 15.770172 4.964058 21.065781 4.322445 9.475815-0.890276 17.954931-5.485945 23.940249-12.93152l62.723553-78.659501C952.498526 461.635939 950.052824 439.560154 935.161672 427.51891z"></path>
       </svg>
     </span>
    </el-tooltip>

    <el-tooltip v-if="showSetting" class="tool-item" effect="dark" content="设置" placement="top">
      <el-popover placement="bottom" width="200" trigger="click">
         <span class="tool-icon" :style="{'color': this.toolColor}" slot="reference">
          <svg viewBox="0 0 1024 1024" focusable="false" data-icon="vertical-align-middle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
            <path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z"></path>
            <path d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z"></path>
          </svg>
        </span>
        <div class="config-con">
          <div class="config-con-header">
            <el-checkbox :indeterminate="isIndeterminate" v-model="isCheckedAll" class="column-check-wrapper" @change="onCheckedAllChange">列显示</el-checkbox>
            <el-button type="text" size="medium" @click="resetColumns">重置</el-button>
          </div>
          <div class="config-con-box">
            <div class="config-con-box-top" v-show="topColumns.length">
              <span class="config-con-box-label">固定在左侧</span>
              <draggable v-model="topColumns" handle=".holder" chosenClass="chosen" forceFallback="true" group="topColumns" animation="500"  @end="onDragEnd">
                <transition-group>
                  <div class="config-con-box-item" v-for="(col) in topColumns" :key="col.prop">
                    <span role="img" aria-label="holder" class="holder">
                      <svg  v-show="topColumns.length>1" viewBox="64 64 896 896" focusable="false" data-icon="holder" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"></path>
                      </svg>
                    </span>
                    <el-checkbox class="column-check-wrapper" v-model="col.selected" @change="onCheckedChange">{{col.label}}</el-checkbox>
                    <div class="column-sort-wrapper">
                      <el-tooltip class="tool-item" effect="dark" content="不固定" placement="top" :enterable="false">
                        <span role="img" aria-label="vertical-align-middle" class="sort-icon" @click="moveColumn(col, 'top', 'middle')">
                          <svg viewBox="64 64 896 896" focusable="false" data-icon="vertical-align-middle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                            <path d="M859.9 474H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zm-353.6-74.7c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H550V104c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v156h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.6zm11.4 225.4a7.14 7.14 0 00-11.3 0L405.6 752.3a7.23 7.23 0 005.7 11.7H474v156c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V764h62.8c6 0 9.4-7 5.7-11.7L517.7 624.7z"></path>
                          </svg>
                        </span>
                      </el-tooltip>
                      <el-tooltip class="tool-item" effect="dark" content="固定在列尾" placement="top" :enterable="false">
                        <span role="img" aria-label="vertical-align-bottom" class="sort-icon" @click="moveColumn(col, 'top', 'bottom')">
                          <svg viewBox="64 64 896 896" focusable="false" data-icon="vertical-align-bottom" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M859.9 780H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM505.7 669a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V176c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8z"></path></svg>
                        </span>
                      </el-tooltip>
                    </div>
                  </div>
                </transition-group>
              </draggable>
            </div>
            <div class="config-con-box-middle" v-show="middleColumns.length">
              <span class="config-con-box-label" v-if="topColumns.length || bottomColumns.length">不固定</span>
              <draggable v-model="middleColumns" handle=".holder" chosenClass="chosen" forceFallback="true" group="middleColumns" animation="500" @end="onDragEnd">
                <transition-group>
                  <div class="config-con-box-item" v-for="(col) in middleColumns" :key="col.prop">
                    <span role="img" aria-label="holder" class="holder">
                      <svg v-show="middleColumns.length>1" viewBox="64 64 896 896" focusable="false" data-icon="holder" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"></path>
                      </svg>
                    </span>
                    <el-checkbox class="column-check-wrapper" v-model="col.selected" @change="onCheckedChange">{{col.label}}</el-checkbox>
                    <div class="column-sort-wrapper">
                      <el-tooltip class="tool-item" effect="dark" content="固定在列首" placement="top" :enterable="false">
                        <span role="img" aria-label="vertical-align-top" class="sort-icon" @click="moveColumn(col, 'middle','top')">
                          <svg viewBox="64 64 896 896" focusable="false" data-icon="vertical-align-top" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"></path></svg>
                        </span>
                      </el-tooltip>
                      <el-tooltip class="tool-item" effect="dark" content="固定在列尾" placement="top" :enterable="false">
                        <span role="img" aria-label="vertical-align-bottom" class="sort-icon" @click="moveColumn(col, 'middle', 'bottom')">
                          <svg viewBox="64 64 896 896" focusable="false" data-icon="vertical-align-bottom" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M859.9 780H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM505.7 669a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V176c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8z"></path></svg>
                        </span>
                      </el-tooltip>
                    </div>
                  </div>
                </transition-group>
              </draggable>
            </div>
            <div class="config-con-box-bottom" v-show="bottomColumns.length">
              <span class="config-con-box-label">固定在右侧</span>
              <draggable v-model="bottomColumns" handle=".holder" chosenClass="chosen" forceFallback="true" group="bottomColumns" animation="500"  @end="onDragEnd">
                <transition-group>
                  <div class="config-con-box-item" v-for="(col) in bottomColumns" :key="col.prop">
                    <span role="img" aria-label="holder" class="holder">
                      <svg v-show="bottomColumns.length>1" viewBox="64 64 896 896" focusable="false" data-icon="holder" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"></path>
                      </svg>
                    </span>
                    <el-checkbox class="column-check-wrapper" v-model="col.selected" @change="onCheckedChange">{{col.label}}</el-checkbox>
                    <div class="column-sort-wrapper">
                      <el-tooltip effect="dark" content="不固定" placement="top" :enterable="false">
                        <span role="img" aria-label="vertical-align-middle" class="sort-icon" @click="moveColumn(col, 'bottom', 'middle')">
                          <svg viewBox="64 64 896 896" focusable="false" data-icon="vertical-align-middle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                            <path d="M859.9 474H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zm-353.6-74.7c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H550V104c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v156h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.6zm11.4 225.4a7.14 7.14 0 00-11.3 0L405.6 752.3a7.23 7.23 0 005.7 11.7H474v156c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V764h62.8c6 0 9.4-7 5.7-11.7L517.7 624.7z"></path>
                          </svg>
                        </span>
                      </el-tooltip>
                      <el-tooltip effect="dark" content="固定在列首" placement="top" :enterable="false">
                         <span role="img" aria-label="vertical-align-top" class="sort-icon" @click="moveColumn(col, 'bottom', 'top')">
                          <svg viewBox="64 64 896 896" focusable="false" data-icon="vertical-align-top" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"></path></svg>
                        </span>
                      </el-tooltip>
                    </div>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </div>
      </el-popover>
    </el-tooltip>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {omitOptions} from "@/components/QueryTableRender/utils";
export default {
  name: "TableTool",
  components: {
    draggable,
  },
  props: {
    columns:{
      default: () => ([])
    },
    config:{
      default: () => ({})
    },
    size: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
      showTools: true,
      showSize: true,
      showRefresh: true,
      showSetting: true,
      toolColor: '#595959',
      topColumns: [],
      middleColumns: [],
      bottomColumns: [],
      headColumns: [],
      middleDefaultProps:[],
      isCheckedAll: true,
      isIndeterminate: false
    }
  },
  mounted(){
    this.initConfig()
    this.initDefaultColumns()
  },
  methods: {
    initConfig() {
      this.showTools = this.config.tool && this.config.tool?.length
      this.showSize = (this.config.tool || []).some(name => 'size' === name)
      this.showRefresh = (this.config.tool || []).some(name => 'refresh' === name)
      this.showSetting = (this.config.tool || []).some(name => 'setting' === name)
      this.toolColor = this.config.color || '#595959'
    },
    onCommandChange(size) {
      this.$emit('tool-size', size)
    },
    onRefresh() {
      this.$emit('tool-refresh')
    },
    initDefaultColumns(){
      this.isCheckedAll = true
      this.isIndeterminate = false

      this.headColumns = []
      this.topColumns = []
      this.bottomColumns = []
      this.middleColumns = []

      let len = this.columns.length
      for (let i = 0; i < len; i++) {
        const col = {...this.columns[i], selected: true, prop: this.columns[i].prop? this.columns[i].prop: this.columns[i].type}
        if (['selection', 'expand'].some(type => type === col.type)) {
          this.headColumns.push(col)
        }else if('left' === col.fixed){
          this.topColumns.push(col)
        }else if('right' === col.fixed){
          this.bottomColumns.push(col)
        }else{
          this.middleColumns.push(col)
          this.middleDefaultProps.push(col.prop)
        }
      }
    },
    resetColumns(){
      this.initDefaultColumns()
      this.updateTableColumns()
    },
    moveColumn(col, from, dest){
      const keyProp = col.prop
      const findIndex = this[from+'Columns'].findIndex(item => item.prop === keyProp)
      if(findIndex > -1){
        this[from+'Columns'].splice(findIndex, 1)

        if('middle' === dest){
          const propIndex = this.middleDefaultProps.findIndex(prop => prop === keyProp)
          if(propIndex>-1){
            const tempProps = this.middleDefaultProps.slice(0, propIndex)

            const index = this.findLastIndex(this.middleColumns, item =>{
              return tempProps.some(t => t === item.prop)
            })

            if(index > -1){
              this.middleColumns.splice(index+1,0, col)
              if(col.selected){
                this.updateTableColumns()
              }
              return
            }
          }

          if('top' === from){
            this[dest+'Columns'].unshift(col)
          }else if('bottom' === from){
            this[dest+'Columns'].push(col)
          }
        }else{
          this[dest+'Columns'].push(col)
        }
      }

      if(col.selected){
        this.updateTableColumns()
      }
    },
    onDragEnd(){
      this.updateTableColumns()
    },
    onCheckedAllChange(value){
      this.isIndeterminate = false;
      this.topColumns.forEach(col => (col.selected = value))
      this.middleColumns.forEach(col => (col.selected = value))
      this.bottomColumns.forEach(col => (col.selected = value))

      this.updateTableColumns()
    },
    onCheckedChange(value){
      if(this.isIndeterminate){
        if(value){
          this.isCheckedAll = [...this.topColumns, ...this.middleColumns,...this.bottomColumns].every(col => col.selected)
          this.isIndeterminate = !this.isCheckedAll
        }else{
          const isAllNotChecked = [...this.topColumns, ...this.middleColumns,...this.bottomColumns].every(col => !col.selected)
          this.isIndeterminate = !isAllNotChecked
        }
      } else {
        this.isIndeterminate = true
        this.isCheckedAll = false
      }

      this.updateTableColumns()

    },
    updateTableColumns(){

      const topSelectColumns = this.topColumns.filter(col => col.selected).map((item,index) => {
        return omitOptions({...item, fixed: 'left', key: item.prop + index}, 'selected')
      })
      const middleSelectColumns = this.middleColumns.filter(col => col.selected).map((item,index) => {
        return omitOptions({...item, key: item.prop + index}, 'fixed', 'selected')
      })
      const bottomSelectColumns = this.bottomColumns.filter(col => col.selected).map((item,index) => {
        return omitOptions({...item, fixed: 'right', key: item.prop + index}, 'selected')
      })

      this.$emit('tool-column', [...this.headColumns, ...topSelectColumns, ...middleSelectColumns, ...bottomSelectColumns])
    },
    findLastIndex(arr, callback, thisArg) {
      for (let index = arr.length - 1; index >= 0; index--) {
        const value = arr[index];
        if (callback.call(thisArg, value, index, arr)) {
          return index;
        }
      }
      return -1;
    }
  }
}
</script>

<style lang="scss" >
.config-con{

  &-header{
    line-height: 32px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding-bottom: 8px;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  &-box{
    max-height: 268px;
    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-color: #d3dce6 #99a9bf;
    scrollbar-width:thin;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 3px #d3dce6;
    }

    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 3px #99a9bf;
      border-radius: 0;
      background: #d3dce6;
    }

    &-label{
      display: inline-block;
      margin-top: 6px;
      margin-bottom: 6px;
      padding-left: 16px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }

    &-item{
      height: 32px;
      line-height: 32px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      font-size: 16px;

      &:hover{
        background: #e6f7ff;
        .column-sort-wrapper{
          display: inherit;
        }
      }

      & > .holder{
        width: 18px;
        padding-right: 16px;
        font-size: 18px;
        color: rgba(0,0,0,.85);
        cursor: move;

        & > svg{
          vertical-align: text-top;
        }
      }

      & .sort-icon{
        margin: 0 4px;
        font-size: 14px;
        color: #1890ff;
        cursor: pointer;
      }

      & > .column-check-wrapper{
        flex: 1 0 0;
        overflow: hidden;
        display: flex;
        align-items: center;

        .el-checkbox__label{
          width: calc(100% - 24px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }
      }

      & > .column-sort-wrapper{
        display: none;
        margin-left: auto;
        color: #1071e6;
      }
    }
  }

  .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #595959;
  }
}
</style>
<style lang="scss" scoped>
.table-tool-con {
  max-width: 80px;
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;

  & .tool-icon{
    font-size: 18px;
    cursor: pointer;

    &:hover{
      color: #1890ff;
    }

    & > svg{
      width: 18px;
      height: 18px;
    }
  }
}
</style>
